<template>
	<view class="">
		<view class="coupon-item">
			<view class="coupon-money">
				<view class="nick" v-if="!types">{{item.title}}</view>
				<view class="layof" :style="{color:theme}">￥{{item.discount / 100.0}}</view>
				<view v-if="item.couponId" class="end_time">有效期至{{item.gmtEnd | dateFormat}}</view>
				<view v-if="!item.couponId && item.gmtEnd" class="end_time">在{{item.gmtEnd}}前有效。
					可领{{item.limit}}张，已领{{item.nowCount}}张</view>
				<view v-if="!item.couponId && !item.gmtEnd" class="end_time">
					在领取后{{item.days}}天内有效。可领{{item.limit}}张，已领{{item.nowCount}}张</view>
				<view v-if="!types">
					<!-- <view class="tit">券号：{{item.ticket}}</view> -->
					<view class="demand">
						满{{item.min / 100.0}}可用。{{item.categoryTitle?'限' + item.categoryTitle + '可用': '全品类可用'}}</view>
				</view>
			</view>
			<!-- <view @click="share" v-if="item.couponId" class="get-btn" :style="{color:color, borderColor:color, background:solid}">分享</view> -->
			<view @click="obtain" v-if="!item.couponId" class="get-btn"
				:style="{color:color, borderColor:color, background:solid}">
				{{ item.nowCount < item.limit ? '立即领取' : '已领取' }}
			</view>
			<view @click="checkTain" v-if="item.couponId" class="get-btn"
				:style="{color:color, borderColor:color, background:solid}">
				{{ item.nowCount < item.limit ? '' : '查看详情' }}
			</view>
		</view>
		<view v-if="checkTainVisible==true">
			<view class="">
				<u-popup :show="show" :round="5" mode="center" @close="close" closeable>
					<view class="component text-center">
						<view class="coupon-no-view">
							<text>编码：</text>
							<text class="coupon-no">{{ code }}</text>
							<view style="position: relative; width: auto; left: 3px;">
								<u-button type="info " :plain="true" text="复制" size="mini" @click="copyCode(code)">
								</u-button>
							</view>

						</view>
						<!-- 二维码 -->
						<view class="component-qr">
							<tki-qrcode ref="qrcode" onval :val="code" :size="250" :load-make="true"
								:show-loading="false" />
						</view>

						<!-- <view  style="width: 600rpx;height: 800rpx;padding: 180rpx;"> -->
						<view class="coupon-no-view1">
							<text>标题：{{item.title}}</text>
							<view>
								<text>内容：满{{item.min / 100.0}}可用。{{item.categoryTitle?'限' + item.categoryTitle + '可用': '全品类可用'}}</text>
							</view>
						</view>

					</view>
				</u-popup>
			</view>
		</view>
	</view>

</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'
	export default {
		components: {
			tkiQrcode
		},
		onLoad(option) {

			// this.$nextTick(() => {
			//      this.checkTain()
			// })
		},
		data() {
			return {
				checkTainVisible: false,
				show: false,
				// title: '标题',
				// content: 'uView的目标是成为uni-app生态最优秀的UI框架',
				code: '',
				barOpations: {
					height: 150,
					displayValue: false
				}
			}
		},
		props: {
			item: {
				type: Object
			},
			index: {
				type: Number
			},
			types: {
				type: String,
				default: ''
			},
			theme: {
				type: String,
				default: '#ff9000'
			},
			solid: {
				type: String,
				default: '#ffffff'
			},
			color: {
				type: String,
				default: '#ff9000'
			},
		},
		methods: {
			copyCode(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
			obtain() {
				this.$emit('obtainCoupon', this.item, this.index)
			},
			share() {
				this.$emit('shareCoupon', this.item, this.index)
			},
			checkTain(e) {
				console.log(e);
				// this.checkTainVisible = !this.checkTainVisible
				this.checkTainVisible = true
				this.show = !this.show
			},

			close() {
				this.show = false

			},
			// init () {
			//     this.code = '616516416' // 生成一维码和二维码
			//     setTimeout(() => {
			//         this.code = '516515646' // 5 秒后刷新一维码和二维码
			//     }, 3000)
			// }
		}
	}
</script>

<style lang='scss'>
	.coupon-item {
		width: 100%;
		height: auto;
		display: table;
		border-radius: 10upx;
		padding: 0 20upx;
		margin-top: 22upx;
		border: 1px solid #eeeeee;
		position: relative;

		.coupon-money {
			width: 465upx;
			height: auto;
			display: table;
			float: left;
			padding: 26upx 0;
			border-style: none dotted none none;
			border-color: #eeeeee;

			.nick {
				width: 100%;
				height: 50upx;
				line-height: 30upx;
				font-size: $font-sm;
				color: #999999;
			}

			.tit {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: $font-sm;
				color: #999999;
			}

			.demand {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: $font-sm;
				color: #999999;
			}

			.layof {
				width: 100%;
				height: 48upx;
				line-height: 30upx;
				font-size: 44upx;
				color: #ff9000;
				font-weight: bold;
			}

			.end_time {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: $font-sm;
				color: #999999;
			}
		}

		.get-btn {
			width: 146upx;
			height: 52upx;
			line-height: 50upx;
			position: absolute;
			top: 50%;
			right: 26upx;
			margin-top: -26upx;
			text-align: center;
			border-radius: 60upx;
			color: #ff9000;
			border: 1px solid #ff9000;
			font-size: $font-sm;
			float: right;
		}
	}

	.coupon-item:after {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		top: -1px;
		border-radius: 0 0 40upx 40upx;
		content: "";
		display: block;
		background: #FFF;
		border: 1px solid #eeeeee;
		border-top: 0px;
	}

	.coupon-item:before {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 460upx;
		bottom: -1px;
		border-radius: 40upx 40upx 0 0;
		content: "";
		display: block;
		background: #FFF;
		border: 1px solid #eeeeee;
		border-bottom: 0px;
	}

	.component {
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		flex: 1;
		/* margin: 64rpx; */
		/* padding: 64rpx 32rpx; */
		padding: 20rpx 30rpx;
		margin: 50rpx;
		/* width: 440rpx; */

		&-title {
			max-height: 112rpx;
			font-size: 40rpx;
			font-weight: 600;
			line-height: 56rpx;
			overflow: hidden;
		}

		&-code {
			height: 150rpx;
			margin: 32rpx 32rpx 0;
		}

		&-qr {
			height: 250rpx;
			margin-top: 36rpx;
		}

		.coupon-no-view {
			height: 76rpx;
			border-radius: 8rpx;
			border: 2px solid #F5F5F5;
			display: flex;
			align-items: center;
			padding: 10rpx;
			margin: 20rpx 0;

			text {
				font-size: 24rpx;
				font-weight: 400;

				&:first-child {
					color: #999999;
				}
			}

			.coupon-no {
				flex: 1;
				text-align: left;
			}
		}

		.coupon-no-view1 {
			align-items: center;
			padding: 10rpx;
			margin: 30rpx auto;

			text {
				font-size: 24rpx;
				font-weight: 600;
				line-height: 48rpx;

				&:first-child {
					color: #2F4F4F
				}
			}
		}

		.component-qr {
			display: flex;
			margin: 20rpx auto 0;


		}

	}
</style>
